
// webpack 是基于node.js的 所有的配置文件中的代码都是基于commonjs语法

// 在webpack 每个插件都是一个类 需要new
// 插件是用来增强webpack的
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ProgressPlugin, ProvidePlugin } = require('webpack');
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')

module.exports = {
    // 入口
    // entry: './src/main.js',  // 相对路径
    // entry: path.resolve(__dirname, 'src/main.js'),  // 绝对路径
    entry: {
        chunk: ["react", "react-dom/client"],
        app: {
            // import 是用来指定我们的业务代码(项目源码) 入口
            import: path.resolve(__dirname, "../", 'src/main.js'),
            // 我们的业务代码是依赖第三方包的
            dependOn: 'chunk'
        },

    },
    // 出口
    output: {
        path: path.resolve(__dirname, "../", 'dist'),
        // filename: 'bundle.js'   // bundle 是一捆一束的意思  把多个js文件 打包为一个js文件
        // [chunkhash:8] 如果你的代码变了 hash是不一样的 解决浏览器缓存问题 
        filename: 'js/[name].[chunkhash:8].js',
        clean: true,  // 每次build打包时  自动删除之前打包的文件
    },
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            // 配置template 是用来指定页面的位置  可以使用绝对路径
            // template: './public/index.html',
            template: path.resolve(__dirname, "../", 'public/index.html'),
            inject: 'body',  // 把js脚本注入到body结束标签之前
            filename: 'index.html',  // 指定打包成功后的页面的名字
            title: 'react-webpack',
            // favicon: path.resolve(__dirname, "../", 'public/002.ico')
        }),
        new ProgressPlugin({
            handler(percentage, message, ...args) {
                if (percentage === 1) {
                    console.log('100% 启动成功')
                } else {
                    if (Math.floor(percentage * 100) % 20 === 0) {
                        console.log(`${Math.floor(percentage * 100)}% 正在打包...`)
                    }

                }
            }
        }),
        // 该插件可以让 模块使用不需要导入
        new ProvidePlugin({
            React: path.resolve(__dirname, "../", "node_modules/react/index.js")
        }),
        // vue插件
        new VueLoaderPlugin(),
    ],
    // module 是模块的意思  在webpack的眼中一切都是模块
    module: {
        rules: [
            // 当webpack工作室 遇到一.js结尾的模块 使用babel-loader进行加载
            // loader是用来加载的 加载完成后 使用@babel/** 进行编译转化 转化成ES5代码
            {
                test: /\.(js|jsx|ts|tsx)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        // 预设
                        presets: [
                            ['@babel/preset-env', {}], // 编译ES6语法
                            ["@babel/preset-react", {}] // 编译jsx语法
                        ],
                        // 这两个是 插件用来编译装饰器的语法
                        // 插件
                        plugins: [["@babel/plugin-proposal-decorators", { "version": "legacy" }],
                            "@babel/plugin-proposal-class-properties"]
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.(css|scss)$/,
                // use: ["style-loader", "css-loader", "sass-loader", "less-loader"]
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.vue$/, use: ['vue-loader']
            },
            {
                // test: /\.(png|jpg|gif)$/, use: ['file-loader']
                // test: /\.(png|jpg|gif)$/, use: ['url-loader']
                // 如果用webpack开进行处理 直接用内置的的图片处理就可以
                test: /\.(png|jpg|gif)$/, type: 'asset/resource',
                generator: {
                    filename: 'img/[name].[contenthash:8][ext]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            // 配置解析src路径
            "@": path.resolve(__dirname, "../", "src")
        },
        // 配置允许 省略哪些后缀
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
    }
}